<div class="card">
    <div class="card-header">
      <div class="row">
        <div class="col col-md-6">
          <h5 class="card-title">
            {{ '::Menu:Authors' | abpLocalization }}
          </h5>
        </div>
        <div class="text-end col col-md-6">
          <div class="text-lg-end pt-2">
            <button *abpPermission="'BookStore.Authors.Create'" id="create" class="btn btn-primary" type="button" (click)="createAuthor()">
              <i class="fa fa-plus me-1"></i>
              <span>{{ '::NewAuthor' | abpLocalization }}</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="card-body">
      <ngx-datatable [rows]="author.items" [count]="author.totalCount" [list]="list" default>
        <ngx-datatable-column
          [name]="'::Actions' | abpLocalization"
          [maxWidth]="150"
          [sortable]="false"
        >
          <ng-template let-row="row" ngx-datatable-cell-template>
            <div ngbDropdown container="body" class="d-inline-block">
              <button
                class="btn btn-primary btn-sm dropdown-toggle"
                data-toggle="dropdown"
                aria-haspopup="true"
                ngbDropdownToggle
              >
                <i class="fa fa-cog me-1"></i>{{ '::Actions' | abpLocalization }}
              </button>
              <div ngbDropdownMenu>
                <button *abpPermission="'BookStore.Authors.Edit'" ngbDropdownItem (click)="editAuthor(row.id)">
                  {{ '::Edit' | abpLocalization }}
                </button>
                <button *abpPermission="'BookStore.Authors.Delete'" ngbDropdownItem (click)="delete(row.id)">
                  {{ '::Delete' | abpLocalization }}
                </button>
              </div>
            </div>
          </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column [name]="'::Name' | abpLocalization" prop="name"></ngx-datatable-column>
        <ngx-datatable-column [name]="'::BirthDate' | abpLocalization">
          <ng-template let-row="row" ngx-datatable-cell-template>
            {{ row.birthDate | date }}
          </ng-template>
        </ngx-datatable-column>
      </ngx-datatable>
    </div>
  </div>
  
  <abp-modal [(visible)]="isModalOpen">
    <ng-template #abpHeader>
      <h3>{{ (selectedAuthor.id ? '::Edit' : '::NewAuthor') | abpLocalization }}</h3>
    </ng-template>
  
    <ng-template #abpBody>
      <form [formGroup]="form" (ngSubmit)="save()">
        <div class="form-group">
          <label for="author-name">Name</label><span> * </span>
          <input type="text" id="author-name" class="form-control" formControlName="name" autofocus />
        </div>
  
        <div class="mt-2">
          <label>Birth date</label><span> * </span>
          <input
            #datepicker="ngbDatepicker"
            class="form-control"
            name="datepicker"
            formControlName="birthDate"
            ngbDatepicker
            (click)="datepicker.toggle()"
          />
        </div>
      </form>
    </ng-template>
  
    <ng-template #abpFooter>
      <button type="button" class="btn btn-secondary" abpClose>
        {{ '::Close' | abpLocalization }}
      </button>
  
      <button class="btn btn-primary" (click)="save()" [disabled]="form.invalid">
        <i class="fa fa-check mr-1"></i>
        {{ '::Save' | abpLocalization }}
      </button>
    </ng-template>
  </abp-modal>
  